<template>
    <div class='page'>
      <div class='nav'>
        <div class="input_view flex_ac" @click="$back() ">
          <van-icon class="ml6" name="arrow-left" size="26" color="#000"/>
          <div class="nav_title">龙头企业</div>
          <img class="mla mr10" width="22px" height="22px" src="~@/assets/img/xiangxian/search.png" alt="">
        </div>
        </div>
      <div class="h40"></div>
      <div class="list">
            <!-- <comLabel ref="comLabel" :keywords='keywords'></comLabel> -->
        <div class="comLabel flex_sb">
          <!-- <div class="nav-left">
            <div class="nav-left-item" @click="open('chain')">
              <div class="one">产业链</div>
            </div>
            <div class="nav-left-item" @click="open('city')">
              <div class="one">区域</div>
            </div>
            <div class="nav-left-item" :key="item.id" v-for="(item,index) in labelList">
              <div @click="categoryClickMain(item)" class="one" :class="[(oneActive==item.id)?'active':'']">
              {{item.name.length>5?item.name.slice(0,5):item.name}}
              </div>
              <div @click="categoryClickMain(item1,item)" class="two" :class="[label_id==item1.id?'active':'',oneActive==item.id?'':'noshow']" v-for="item1 in item.labels" :key='item1.id'>{{item1.label.length>5?item1.label.slice(0,5):item1.label}}</div>
            </div>
          </div>
           -->
          <div class="nav-right" ref="gun">
            <div class="r_top">
              <div class="sx_div">
                <div class="c_item" v-if="query.chain_name">
                  {{query.chain_name}}
                  <van-icon class="close" name="clear" size="18" color="#CCCCCC" @click="clearChain"></van-icon>
                </div>
                <div class="c_item" v-if="label_name">
                  {{label_name}}
                  <van-icon class="close" name="clear" size="18" color="#CCCCCC" @click="clearLabel"></van-icon>
                </div>
                <div class="c_item" v-if="query.city_name">
                  {{query.city_name}}
                  <van-icon class="close" name="clear" size="18" color="#CCCCCC" @click="clearCity"></van-icon>
                </div>
              </div>
              <div class="total">为您找到 <span style="color: #FA8A26;">{{ total>10000?'10000+':total }}</span> 个相关结果</div>
            </div>
            <van-list
              v-model="isLoad"
              :finished="isfinish"
              finished-text="没有更多了"
              @load="getMore">
              <div class="list_item flex_sb" v-for="(item,index) in list" :key="index" @click="toDetail(item.identification)">
                <div class="img img_small">
                  <img v-if="item.logo&&!item.isErr" @error="item.isErr=true;$forceUpdate()" :src="item.logo"></img>
                  <div v-if="(item.isErr||!item.logo)" class="logo_name">{{ (!item.logo||item.logo.indexOf('.')>-1)? item.company_name.substring(0,4) : item.logo}}</div>
                </div>
                <div class="right_div right_div_small">
                  <div class="r_title">{{item.company_name}}</div>
                  <div class="h6"></div>
                  <div class="r_small">{{item.park_name}}</div>
                  <div class="chain_div" v-if="item.chain_name.length>0" v-for="(chain,index) in item.chain_name.slice(0,2)" :key="index">{{chain}}</div>
                  <div class="h6"></div>
                  <div class="r_small">
                    <span>{{item.address||'-'}} </span> 
                  </div>
                </div>
              </div>
            </van-list>
          </div>
    
            <van-popup v-model="showPicker" round position="bottom">
            <van-picker
              v-show="type=='chain'"
              value-key="chain_name"
              show-toolbar
              :columns="chainList"
              @cancel="showPicker = false"
              @confirm="onConfirm"
            />
            <van-picker
              v-show="type=='city'"
              value-key="city_name"
              show-toolbar
              :columns="cityList"
              @cancel="showPicker = false"
              @confirm="onConfirm"
            />
          </van-popup>
        </div>
        </div>
        <!-- <van-list
          v-model="isLoad"
          :finished="isfinish"
          finished-text="没有更多了"
          @load="getMore">
          <div class="total">为您找到 <span style="color: #FA8A26;">{{ total }}</span> 个相关结果</div>
          
        </van-list> -->
    </div>
    </template>
    <script>
    // import comLabel from '@/components/comLabel.vue'
    import { company } from '@/api/api.js'
    export default {
      components: {
        // comLabel
      },
      data() {
        return {
          keywords: '',
          showPicker: false,
          type: '',
          
                chainList:[],
                cityList:[],
                
                labelList:[],
                label_name:'',
                label_id:'',
                page:0,
                isfinish:false,
                isLoad:false,
                total:'',
                query:{},
                queryData:{
                    chain_id:'',
                    city_id:''
                },
                list:[],
                
                oneActive: '',
        }
      },
      async created() {
        this.getLabelList()
    
            let chainList = JSON.parse(sessionStorage.chainList)
        chainList.unshift({chain_name: '不限',id:''})
        this.chainList = chainList
    
        this.cityList = JSON.parse(sessionStorage.cityList)
            
            
            if(sessionStorage.com_chain){
                let chain = JSON.parse(sessionStorage.com_chain)
                sessionStorage.com_chain = ''
                this.query.chain_name = chain.chain_name
                this.queryData.chain_id = chain.id
            }
            
            this.init()
        },
        methods:{
        open(type) { 
          this.type = type
          this.showPicker = true
        },
        onConfirm(val,index) {
          this.showPicker = false
          let item = {}
          if (this.type == 'chain') { 
            this.query.chain_name = val.chain_name
            this.queryData.chain_id = val.id
          } else {
            index.forEach((i, k) => {
              if (i) {
                if (k == 0) {
                  item = this.cityList[i]
                  this.query.city_name = item.city_name
                  this.queryData.city_id = item.id
                } else {
                  item = item.children[i]
                  this.query.city_name = item.city_name1 || item.city_name
                  this.queryData.city_id = item.id
                }
              } else if (k == 0) { 
                this.query.city_name = '不限'
                this.queryData.city_id = ''
              }
            })
          }
          this.init()
        },
            getLabelList(){
                company.getLabel().then(res=>{
                    this.labelList = res.data
                })
            },
        categoryClickMain(item, itemp = false) {
          console.log(item)
                if(this.oneActive == item.id){
                    this.oneActive = ''
                    return
                }
                if(item.id==0){
                    this.oneActive = item.id
                    this.label_id= item.id
                    this.childrenList = [{label:'不限',id:''}]
                    this.init()
                    return
                }
                if(!itemp){
                    this.oneActive = item.id
                    this.label_name= item.labels[0].label
                    this.label_id= item.labels[0].id
                }else{
                    this.oneActive = itemp.id
                    this.label_id= item.id
                    this.label_name= item.label
                }
                this.init()
            },
            clearChain(){
                this.query.chain_name = ''
                this.queryData.chain_id = ''
                this.init()
            },
            clearCity(){
                this.query.city_name = ''
                this.queryData.city_id = ''
                this.init()
            },
            clearLabel(){
                this.oneActive = ''
                this.label_id = ''
                this.label_name = ''
                this.init()
            },
        getMore() {
                if(this.page == 0){
                    return
                }
                this.page += 1
                this.getCList()
            },
            init(){
                this.list = []
                this.$nextTick(()=>{
                    this.page = 1
                    this.isfinish = false
                    this.getCList()
                })
            },
            getCList(){
                if(this.isfinish){
                    return
                }
                this.isLoad = true
                
                let data = {
                    ...this.queryData,
                    label_id:50150,
                    city_id:2380,
                    keywords:this.keywords,
                    label_id:this.label_id,
                    page:this.page||1,
                }
                if(!data.keywords &&!data.chain_id ){
                    data.order = 'score'
                    data.fromtype = 'mychainid'
                }else{
                    data.order = ''
                }
                
                company.getList(data).then(res=>{
                    if(this.page==1){
                        this.list = res.data.data
                    }else{
                        this.list.push(...res.data.data)
                    }
                    this.total = res.data.total
                    if(this.list?.length >= res.data.total){
                        this.isfinish = true
                    }
                    this.isLoad = false
                })
            },
            toDetail(identification) {
          this.$router.push({name: 'companyDetail', query: {identification}})
        }
        }
    }
    </script>
    
    <style scoped lang="scss">
    .total{
      font-size: 10px;
      padding: 10px;
      background: #fff;
    }
    .comLabel{
        width:100%;
        height:100%;
        .nav-right {
            width: 100%;
            height: 100%;
        background: #fff;
        overflow: auto;
        position: relative;
        .r_top{
          position: sticky;
          top: 0;
          background: #fff;
          z-index: 10;
          box-shadow: 0 0 10px 0 #0001;
        }
            .shaixuan{
                height:30px;
                padding-left:10px;
            }
            .c_item{
                display: inline-block;
                margin-left: 10px;
                margin-top: 10px;
                height: 25px;
                line-height: 25px;
                padding: 0 10px;
                background: #F5F5F5;
                border-radius: 5px;
                font-size: 11px;
                color: #000000;
                position: relative;
                .close{
                    position: absolute;
                    right:-6px;
                    top:-6px;
                }
            }
        }
        .nav-left {
            width: 25%;
            height:100%;
            background: #f6f6f6;
        overflow: auto;
        .nav-left-item {
            .one{
                height: 50px;
                // border-right: solid 1px #f1f1f1;
                border-bottom: solid 1px #f1f1f1;
                font-size: 14px;
                display: flex;
                align-items: center;
                // justify-content: center;
                text-indent: 10px;
                position: relative;
                
            }		
            .two{
                height: 50px;
                border-right: solid 1px #f1f1f1;
                border-bottom: solid 1px #f1f1f1;
                font-size: 12px;
                display: flex;
                color: #666;
                align-items: center;
                // justify-content: center;
                text-indent:16px;
                transition: all 0.5s;
                opacity: 1;
            }		
            .noshow{
                height: 0px;
                opacity: 0;
                overflow: hidden;
                display: none;
            }
            .shang{
                position: absolute;
                width: 6px;
                height: 6px;
                border-top: 1px solid #ff9933;
                border-right: 1px solid #ff9933;
                transition: all 0.5s;
                transform: rotate(-45deg);
                right: 4px;
                top: 24px;
            }
            .xia{
                border-top: 1px solid #333;
                border-right: 1px solid #333;
                transform: rotate(135deg);
                top: 22px;
            }
        }
            .active {
                font-size: 13px;
                color: #FA8A26;
                background: #fff;
                position: relative;
                &::after{
                    content:'';
                    position: absolute;
                    left:5px;
                    top:18px;
                    width: 3px;
                    height: 14px;
                    background: linear-gradient(153deg, #FA8A2622, #FA8A26);
                    border-radius: 2px;
                }
            }
        }
    }
    
    .sx_div{
        width:100%;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .list_item{
        width: calc(100% - 40px);
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0px 1px 10px 0px #0A477519;
        margin: 10px 10px 15px;
        position: relative;
        .img_small{
            height: 40px !important;
            width: 40px !important;
            border-radius: 4px !important;
            text-align: center;
            font-size: 14px !important;
        }
        .img{
            width: 100px;
            height: 70px;
            border-radius: 6px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 0 5px 0 rgba(0, 0,0, 0.1);
            .logo_name{
                height: 100%;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                background: #138AF2;
                color: #fff;
            }
            img{
                width: 100%;
                height: 100%;
            }
        }
        .right_div_small{
            width: calc(100% - 50px) !important
        }
        .right_div{
            width: calc(100% - 110px);
            .r_title{
                font-size: 15px;
                font-weight: 600;
                color: #333;
            }
        }
    }
    
    .r_small{
      font-size: 11px;
      color: #666666;
    }
    .chain_div{
      background-color: #FA8A2622;
      color: #FA8A26;
      padding: 0 4px;
      height: 18px;
      line-height: 18px;
      border-radius: 3px;
      font-size: 10px;
      margin: 8px 5px 0 0;
      display: inline-block;
    }
    .nav{
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba($color: #fff, $alpha: 1);
        z-index: 10;
        transition: all 0.5s;
    }
    .input_view{
        width: 100%;
      height: 40px;
        .nav_title{
            font-weight: 500;
            font-size: 18px;
            color: #000;
        }
    }
    
    .page{
        height:100%;
        width:100%;
        background: #F4F4F4;;
      .total{
        margin-left: 10px;
        font-size: 10px;
        color: #333333;
      }
    }
    
    .list{
      height: calc(100% - 40px);
    }
    </style>